<template>
  <div>
    <el-table
        ref="tableData"
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          align='center'
          label="编号"
          width="300">
      </el-table-column>
      <el-table-column
          fixed
          align='center'
          prop="orderDate"
          label="日期"
          width="200">
      </el-table-column>
      <el-table-column
          align='center'
          prop="user.name"
          label="姓名"
          width="200">
      </el-table-column>
      
      <el-table-column
          align='center'
          prop="orderNum"
          label="数量"
          width="200">

      </el-table-column>
      <el-table-column
          align='center'
          prop="price"
          label="价格"
          width="150">
      </el-table-column>

      <el-table-column

          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="look(scope.row)">修改</el-button>
        </template>
      </el-table-column>


    </el-table>



    <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
      <el-table :data="tableData2">
        <el-table-column align='center' property="goodsName" label="商品名称"></el-table-column>
        <el-table-column align='center' property="goodsNum" label="商品数量"></el-table-column>
        <el-table-column align='center' property="outPrice" label="商品价格"></el-table-column>
        <el-table-column align='center' property="status" label="状态"></el-table-column>
        <el-table-column align='center' label="修改">
          <template slot-scope="scope2">
              <el-button type="primary" v-if="scope2.row.status=='未发货'" @click="modifySubmit1(scope2)">发货</el-button>
              <el-button type="primary" v-if="scope2.row.status=='已发货'" @click="modifySubmit2(scope2)">结单</el-button>
            <div v-if="scope2.row.status=='已完成'">订单已完成</div>
          </template>

        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>
<style>

</style>

<script>
import axios from 'axios'

export default {
  name: 'Orders',
  methods: {
    modifySubmit1(scope2){
      this.$confirm('发货后将无法更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData2[scope2.$index].status='已发货';
        this.modifyData.gId=scope2.row.id;
        this.modifyData.status='已发货';
        axios({
          method: "post",
          url: "http://localhost:8088/editStatus",
          params: this.modifyData
        }).then(resp=>{
          if(resp.data==true){
            this.$message({
              message: '修改成功！',
              type: 'success'
            });
          }else {
            this.$message({
              message: '修改失败！',
              type: 'warning'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    modifySubmit2(scope2){
      this.$confirm('结单后将无法更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modifyData.gId=scope2.row.id;
        this.modifyData.status='已完成';
        this.tableData2[scope2.$index].status='已完成';
        axios({
          method: "post",
          url: "http://localhost:8088/editStatus",
          params: this.modifyData
        }).then(resp=>{
          if(resp.data==true){
            this.$message({
              message: '修改成功！',
              type: 'success'
            });
          }else {
            this.$message({
              message: '修改失败！',
              type: 'warning'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    modify(row) {
      this.modifyData.oId=row.id;
      this.dialogTableVisible2 = true;
    },
    look(row) {
      this.tableData2 = row.goodsList;
      this.modifyData.oId = row.id
      this.dialogTableVisible = true;

    }
  },
  data() {
    return {
      radio4:'',
      modifyData:{
        oId:'',
        gId:'',
        status:'',
      },
      tableData2: [],
      dialogTableVisible2: true,
      dialogTableVisible: false,
      tableData: []
    }
  },
  created() {
    axios.get(`http://localhost:8088/allUserOrder`).then(response => {
      console.log(response.data)
     // this.$set(this,'tableData',response.data)
      this.$set(this, 'tableData', response.data)
    })
  },
}
</script>

<style>

</style>